<title>JsTree</title>

<link rel="stylesheet" href="/vendor/jstree/jstree.css">

<div class="page animation-fade">
    <div class="page-header">
        <h1 class="page-title">JsTree</h1>
        <div class="page-header-actions">
            <a class="btn btn-inverse btn-round" href="http://jstree.com/" target="_blank">
                <i class="icon wb-link" aria-hidden="true"></i> <span class="hidden-xs">官网</span></a>
        </div>
    </div>
    <div class="page-content">

        <div class="panel">
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">HTML</h4>
                            <div class="example">
                                <div data-plugin="jstree">
                                    <ul>
                                        <li data-jstree='{ "opened" : true }'>父节点
                                            <ul>
                                                <li data-jstree='{ "selected" : true }'>子节点 1</li>
                                                <li>子节点 2</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">内嵌数据</h4>
                            <div class="example">
                                <div id="data"></div>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-md-block visible-sm-block"></div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">数据格式化</h4>
                            <div class="example">
                                <div id="frmt"></div>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-lg-block"></div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">Ajax</h4>
                            <div class="example">
                                <div id="ajax"></div>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-md-block visible-sm-block"></div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">懒加载</h4>
                            <div class="example">
                                <div id="lazy"></div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">从回调函数中获取数据</h4>
                            <div class="example">
                                <div id="clbk"></div>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix hidden-xs"></div>
                    <div class="col-md-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">交互和事件</h4>
                            <div class="example">
                                <div id="evts"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="/vendor/jstree/jstree.min.js" data-name="jstree"></script>
<script src="/js/examples/components/advanced/jstree.js" data-deps="jstree"></script>
